<template>
    <div id="RiskZoning" class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div v-if="$hasPer('RiskZoning:add') || $hasPer('RiskZoning:excel')" style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item >
                            <el-button v-if="$hasPer('RiskZoning:add')" @click="nodeClick('','add')" icon="ele-Plus" type="primary"> 新增 </el-button>
                                    <el-button v-if="$hasPer('RiskControl:batchStart')" @click="batchHandle(getData)" icon="ele-Refresh"> 批量同步 </el-button>
                            <el-button v-if="$hasPer('RiskZoning:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <el-table 
                                        ref="excelRef" 
                                        :data="list" 
                                        class="w-h-100" 
                                        style="width: 100%" 
                                        border 
                                        v-loading="loading" 
                                        element-loading-background="rgba(0, 0, 0, 0.5)"
                                        @selection-change="handleSelectionChange"
                                    >

                                        <!-- <el-table-column type="index" label="序号" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" /> -->
                                        <el-table-column type="selection" width="55" />
                                        
                                        <el-table-column width="80" :show-overflow-tooltip="true" label="待同步"  align="center">
                                            <template #default="scope">
                                                <span style="color: #67C23A;" v-if="scope.row.isTobeDS">是</span>
                                                <span v-else> - </span>
                                            </template>
                                        </el-table-column>
                                        
                                        <el-table-column min-width="200" :show-overflow-tooltip="true" prop="" label="分区名称" align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Name" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_Name">{{ scope.row.v_Name }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="风险等级"  align="center">
                                            <!-- <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Level" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span style="color: #67C23A;" v-if="scope.row.n_RiskLevel === 0">{{ scope.row.v_RiskLevelName }}</span>
                                                    <span style="color: #E6A23C;" v-if="scope.row.n_RiskLevel === 1">{{ scope.row.v_RiskLevelName }}</span>
                                                    <span style="color: #CE7C01;" v-if="scope.row.n_RiskLevel === 2">{{ scope.row.v_RiskLevelName }}</span>
                                                    <span style="color: #FC5400;" v-if="scope.row.n_RiskLevel === 3">{{ scope.row.v_RiskLevelName }}</span>
                                                </template>
                                            </el-table-column> -->
                                            <template #default="scope">
                                                <span style="color: #67C23A;" v-if="scope.row.n_RiskLevel === 0">{{ scope.row.v_RiskLevelName }}</span>
                                                <span style="color: #E6A23C;" v-if="scope.row.n_RiskLevel === 1">{{ scope.row.v_RiskLevelName }}</span>
                                                <span style="color: #CE7C01;" v-if="scope.row.n_RiskLevel === 2">{{ scope.row.v_RiskLevelName }}</span>
                                                <span style="color: #FC5400;" v-if="scope.row.n_RiskLevel === 3">{{ scope.row.v_RiskLevelName }}</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="危险源等级"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Danger" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_DangerSourceLevelName">{{ scope.row.v_DangerSourceLevelName }}</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="是否重大危险源"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Greate" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span style="color: #F56C6C;" v-if="scope.row.isGreateDangerSource">是</span>
                                                    <span style="color: #67C23A;" v-else>否</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="分区类型"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Type" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_Type">{{ scope.row.v_Type }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="所属空间位置名称"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Location" typeVal="cascader" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_SpatialLocationName">{{ scope.row.v_SpatialLocationName }}</span>
                                                    <span v-else>-</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="分区图绘制状态"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Area" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span style="color: #F56C6C;" v-if="scope.row.n_AreaChartState === 0">{{ scope.row.v_AreaChartStateName }}</span>
                                                    <span style="color: #67C23A;" v-else>{{ scope.row.v_AreaChartStateName }}</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="责任部门"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Dep" typeVal="cascader" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_ResponsibleDepName">{{ scope.row.v_ResponsibleDepName }}</span>
                                                    <span v-else>-</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" prop="" label="负责人"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Man" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_ResponsibleMan">{{ scope.row.v_ResponsibleMan }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="报警类型-闯入"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Alarm" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span style="color: #67C23A;" v-if="scope.row.isAlarmIntrude">是</span>
                                                    <span style="color: #E6A23C;" v-else>否</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="报警类型-超员"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Overman" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span style="color: #67C23A;" v-if="scope.row.isAlarmOverman">是</span>
                                                    <span style="color: #E6A23C;" v-else>否</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="报警类型-串岗"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Posts" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span style="color: #67C23A;" v-if="scope.row.isAlarmSerialPosts">是</span>
                                                    <span style="color: #E6A23C;" v-else>否</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="报警类型-静止"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Still" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span style="color: #67C23A;" v-if="scope.row.isAlarmStill">是</span>
                                                    <span style="color: #E6A23C;" v-else>否</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="查看分区部门"  align="center">
                                            <template #default="scope">
                                                <el-popover placement="left" :width="200" trigger="click">
                                                    <template #reference>
                                                        <el-button @click="viewClick(scope.row,1)" class="icon-e" icon="ele-View" size="small" text type="warning">查看</el-button>
                                                    </template>
                                                    <ul style="max-height: 40vh; overflow-y: auto;">
                                                        <el-input v-model="filterSearch" placeholder="搜索" :suffix-icon="Search" @input="handleInputChange" size="small" />
                                                        <li v-if="listData.length !== 0" v-for="item in listData" :key="item.id">
                                                            <span v-if="item.v_DeptName">{{ item.v_DeptName }}</span>
                                                            <span v-else>-</span>
                                                        </li>
                                                        <span v-else style="color: #8D9095;display: block;width: 100%;padding: 10px 0;text-align: center;">暂无数据</span>
                                                    </ul>
                                                </el-popover>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="查看分区排查人员"  align="center">
                                            <template #default="scope">
                                                <el-popover placement="left" :width="200" trigger="click">
                                                    <template #reference>
                                                        <el-button @click="viewClick(scope.row,2)" class="icon-e" icon="ele-View" size="small" text type="warning">查看</el-button>
                                                    </template>
                                                    <ul style="max-height: 40vh; overflow-y: auto;">
                                                        <el-input v-model="filterSearch" placeholder="搜索" :suffix-icon="Search" @input="handleInputChange" size="small" />
                                                        <li v-if="listData.length !== 0" v-for="item in listData" :key="item.id">
                                                            <span v-if="item.v_UsertName">{{ item.v_UsertName }}</span>
                                                            <span v-else>-</span>
                                                        </li>
                                                        <span v-else style="color: #8D9095;display: block;width: 100%;padding: 10px 0;text-align: center;">暂无数据</span>
                                                    </ul>
                                                </el-popover>
                                            </template>
                                        </el-table-column>
                                        
                                        <el-table-column min-width="180" :show-overflow-tooltip="true" label="最后一次同步时间"  align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.d_InitiateDSTime">{{ scope.row.d_InitiateDSTime }}</span>
                                                <span v-else> - </span>
                                            </template>
                                        </el-table-column>
                                        
                                        <el-table-column width="180" :show-overflow-tooltip="true" label="发起同步时间"  align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.d_InitiateDSTime">{{ scope.row.d_InitiateDSTime }}</span>
                                                <span v-else> - </span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="风险分析对象编码"  align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.v_RISK_OBJECT_CODE">{{ scope.row.v_RISK_OBJECT_CODE }}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="180" :show-overflow-tooltip="true" prop="createdTime" label="创建时间"  align="center" sortable>
                                            <template #default="scope">
                                                <span v-if="scope.row.createdTime">{{ scope.row.createdTime }}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="180" :show-overflow-tooltip="true" prop="updatedTime" label="更新时间"  align="center" sortable>
                                            <template #default="scope">
                                                <span v-if="scope.row.updatedTime">{{ scope.row.updatedTime }}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column width="540" label="操作" align="center" fixed="right">
                                            <el-table-column :show-overflow-tooltip="true" width="540" align="center">
                                                <template #header>
                                                    <el-button class="icon-e" @click='searchClick' size="small" icon="ele-Search" type="primary" text> 查询 </el-button>
                                                    <el-button class="icon-e clear-bg" style="background-color: transparent !important;" size="small" @click="resetClick" icon="ele-Refresh" text> 重置 </el-button>
                                                </template>
                                                <template #default="scope">
                                                    <div class="operate-s">
                                                        <el-button @click="detailHandle(scope.row.id)" class="icon-e" icon="ele-View" size="small" text type="success">详情</el-button>
                                                        <el-button v-if="$hasPer('RiskZoning:edit')" @click="nodeClick(scope.row,'edit')" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                                        <el-button v-if="$hasPer('RiskZoning:del')" @click="deleteHandle(scope.row.id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                                        <el-button v-if="$hasPer('RiskZoning:chooseDep')" @click="documentClick(scope.row,1)" class="icon-e" icon="ele-Discount" size="small" text type="warning">选择分区部门</el-button>
                                                        <el-button v-if="$hasPer('RiskZoning:chooseUse')" @click="documentClick(scope.row,2)" class="icon-e" icon="ele-UserFilled" size="small" text type="success">选择分区排查人员</el-button>
                                                        <el-button @click="drawHandle(scope.row)" v-if="scope.row.n_AreaChartState === 0 && $hasPer('RiskZoning:area')" class="icon-e" icon="ele-DataLine" size="small" text type="primary">绘制区域</el-button>
                                                        <el-button @click="drawHandle(scope.row)" v-if="scope.row.n_AreaChartState === 1 && $hasPer('RiskZoning:viewArea')" class="icon-e" icon="ele-DataLine" size="small" text type="primary">查看/编辑区域</el-button>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <!-- 新增/编辑 -->
        <AddEditRiskZoning
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @updateData="getData"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
        <!-- 选择部门/人员 -->
        <ChoiceFun
            :repairInfo="repairFunInfo"
            :userObj="userObj"
            :depObj="depObj"
            :isUseDialog="isFunDialog"
            @updateData="getData"
            @cancelFunClick="cancelFunClick"
            @controlFunClick="controlFunClick"
        />
        <!-- 图形绘制 -->
        <DrawArea 
            :coordinatesArr="coordinatesArr"
            :isUseDialog="drawVisible" 
            :drawInfo="drawInfo"
            @updateData='getData'
            @cancelDrawClick="cancelDrawClick"
            @controlDrawClick="controlDrawClick"
        />
        <!-- 详情 -->
        <DetailModel
            :detailInfo="detailInfo"
            :MdetailDialog="MdetailDialog"
            labelWidth="150px"
            @cancelDetailClick="cancelDetailClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw } from 'vue';
import getTableData from '/@/utils/getTableData';
import {
    SMSDCRiskPartitionPage , 
    SMSDCRiskPartitionDelete , 
    SMSDCRiskPartitionDeptList , 
    SMSDCRiskPartitionUserList ,
    sysDictDataList ,
    SMSDCRiskPartitionDetail,
    SMSDCRiskPartitionList,
    SMSDCSysDSTaskMaBathAddTasks,
} from '/@/api/centerControl/sms';
import { sysOrgTree } from '/@/api/centerControl/pubilc';
import AddEditRiskZoning from '../component/sms/add-edit-RiskZoning.vue';
import ChoiceFun from '../component/sms/choice-fun.vue';
import { ElMessageBox , ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import DrawArea from '../component/drawArea.vue';
import SearchModel from '../component/search-model.vue';
import axios from 'axios';
import DetailModel from '../component/detail-model.vue';
import { exportToExcel } from '/@/utils/exportToExcel';
import { confirmFun } from '../component/messageTs';

export default defineComponent( {
    name: 'RiskZoning',
    components: {
        AddEditRiskZoning,
        ChoiceFun,
        DrawArea,
        SearchModel,
        DetailModel,
    },
    setup(props){
        const isUseDialog = ref() // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref() // 传递子组件数据
        const isFunDialog = ref(false);
        const repairFunInfo = ref();
        const listData:any = ref([]);
        const filterSearch = ref();
        let originalInfo = '';
        const drawVisible = ref(false);
        const drawInfo = ref();
        const baseUrl = import.meta.env.VITE_API_URL;
        const equUrl = baseUrl + '/EAM/Location/Tree'; // 设备下拉框数据
        let currentNum: any = '';
        const depObj: any = ref({});
        const userObj: any = ref({});
        const coordinatesArr: any = ref([]);
        let multipleSelection: any = [];

        /*** 批量同步 */
        const handleSelectionChange = (val: any) => {
            multipleSelection = val;
        }

        /*** 批量同步按钮 */
        const batchHandle = (uploadFun: Function) => {
            let setArr: any = [];
            if(multipleSelection.length === 0){
                ElMessage({
                    type: 'warning',
                    message: '请选择需同步的数据',
                });
                return;
            }else{
                confirmFun('是否批量同步已选数据？','提示','warning','取消').then(async(isConfirmed: any) => {
                    if(isConfirmed){
                        // multipleSelection.map((item: any) => {
                        //     if(item.d_LastDSTime !== null){
                        //         setArr.push(item.id);
                        //     }
                        // });
                        // return
                        let res: any = await SMSDCSysDSTaskMaBathAddTasks({ n_DCSysDSTaskType: 1, l_AppInstanceIds: setArr });
                        if(res.success) uploadFun();
                    }
                });
            }
        }

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:string | object , am:string) => {
            val !== '' ? repairInfo.value = JSON.stringify(toRaw(val)) : repairInfo.value = ''
            isUseDialog.value = true
        };

        /*** 删除数据事件 */
        const deleteHandle = async (val: String | Number, updateFun: Function) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val};
                try {
                    let res:any = await SMSDCRiskPartitionDelete(param);
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        };

        /*** 监听搜索框改变事件 */
        const handleInputChange = (val: any) => {
            if(val !== ''){
                let getArr = JSON.parse(originalInfo);
                let filteredArr: any;
                if(currentNum === 1) filteredArr = getArr.filter((item: any) => item.v_DeptName.includes(val));
                if(currentNum === 2) filteredArr = getArr.filter((item: any) => item.v_UsertName.includes(val));
                listData.value = filteredArr;
            }else{
                listData.value = JSON.parse(originalInfo);
            }
        }

        /*** 查看部门/人员数据 */
        const viewClick = (val:any, num: number) => {
            listData.value = [];
            filterSearch.value = '';
            originalInfo = '';
            currentNum = num;
            getListFun(val,num);
        }

        /*** 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        };

        /*** 提交事件 */
        const controlUseClick = () => {
            isUseDialog.value = false
        };

        /*** 获取部门/人员列表 */
        const getListFun = async(val: any, num: number) => {
            let param: any = {};
            param.l_RiskPartitionId = val.id;
            let res:any;
            if(num === 1){
                res = await SMSDCRiskPartitionDeptList(param);
            }else{
                res = await SMSDCRiskPartitionUserList(param);
            }
            if(res.success) {
                if(res.data.length !== 0){
                    let setArr: any = [];
                    depObj.value = {};
                    // userObj.value = {};
                    if(num === 1){
                        res.data.map((item: any) => {
                            setArr.push(item.l_DeptId);
                        });
                        depObj.value.id = val.id;
                        depObj.value.depArr = setArr;
                    }
                    if(num === 2){
                        res.data.map((item: any) => {
                            setArr.push(item.l_UsertId);
                        });
                        userObj.value.id = val.id;
                        userObj.value.userArr = setArr;
                    }
                }
                listData.value = res.data;
                originalInfo = JSON.stringify(res.data);
            }
        }

        /*** 获取部门/人员数据 */
        const getDepAndUseFun = async (val: any, num: number) => {
            if(num === 1){
                if(Object.keys(depObj.value).length !== 0 && depObj.value.id === val.id){
                    // console.log(depObj.value,'depObj.value') 不做处理
                }else{
                    await getListFun(val, num);
                }
            }
            if(num === 2){
                if(Object.keys(userObj.value).length !== 0 && userObj.value.id === val.id){
                    // console.log(userObj.value,'userObj.value'); 不做处理
                }else{
                    await getListFun(val, num);
                }
            }
        }
        
        /*** 选择部门/选择人员 */
        const documentClick = async (val:any, num: number) => {
            if(num === 2){
                userObj.value = {};
                let param: any = {};
                param.l_RiskPartitionId = val.id;
                let res: any = await SMSDCRiskPartitionDeptList(param);
                if(res.success){
                    if(res.data.length === 0){
                        ElMessage({
                            type: 'error',
                            message: '请先选择分区部门',
                        });
                        return
                    }else{
                        let setArr: any = [];
                        res.data.map((item: any) => {
                            setArr.push(item.l_DeptId);
                        });
                        userObj.value.depArr = setArr;
                    }
                }
            }
            await getDepAndUseFun(val , num);
            num === 1 ? val.presentStatus = 'dep' : val.presentStatus = 'pro';
            repairFunInfo.value = JSON.stringify(val);
            isFunDialog.value = true;
        }

        /*** 部门/人员取消事件 */
        const cancelFunClick = () => {
            depObj.value = {};
            userObj.value = {};
            isFunDialog.value = false;
        }

        /*** 部门/人员提交事件 */
        const controlFunClick = () => {
            depObj.value = {};
            userObj.value = {};
            isFunDialog.value = false;
        }
        
        /*** 绘制区域取消事件 */
        const cancelDrawClick = () => {
            drawVisible.value = false;
        }

        /*** 绘制区域提交事件 */
        const controlDrawClick = () => {
            drawVisible.value = false;
            coordinatesArr.value = [];
            getPartitionListFun();
        }

        /*** drawHandle 查看/绘制区域点击事件 */
        const drawHandle = async (val: any) => {
            await getPartitionListFun();
            drawInfo.value = JSON.stringify(val);
            drawVisible.value = true;
        }

        /*** 获取风险分区列表 */
        const getPartitionListFun = async() => {
            let res: any = await SMSDCRiskPartitionList({});
            if(res.success){
                res.data.map((item: any) => {
                    // if(item.v_Coordinates) coordinatesArr.value.push(item.v_Coordinates);
                    if(item.v_Coordinates) coordinatesArr.value.push(item);
                });
            }
        }

        /*** ================================= 详情类数据操作 =================================  */
        const MdetailDialog = ref(false);
        const detailInfo = ref();
        /*** 获取详情接口数据 */
        const getDetailFun = async (id: number) => {
            let res: any = await SMSDCRiskPartitionDetail({id: id}); // 详情
            if(res.success){
                let setArr: any = [];
                let detailObj: any = {};
                detailObj['名称'] = res.data.v_Name;
                detailObj['风险分区类型'] = res.data.v_Type;
                detailObj['所属空间位置'] = res.data.v_SpatialLocationName;
                detailObj['风险分区图绘制状态'] = res.data.v_AreaChartStateName;
                detailObj['责任部门'] = res.data.v_ResponsibleDepName;
                detailObj['责任人'] = res.data.v_ResponsibleMan;
                detailObj['报警类型-闯入'] = res.data.isAlarmIntrude ? '是' : '否';
                detailObj['报警类型-超员'] = res.data.isAlarmOverman ? '是' : '否';
                detailObj['报警类型-串岗'] = res.data.isAlarmSerialPosts ? '是' : '否';
                detailObj['报警类型-静止'] = res.data.isAlarmStill ? '是' : '否';
                detailObj['风险等级'] = res.data.v_RiskLevelName;
                detailObj['危险源等级'] = res.data.v_DangerSourceLevelName;
                detailObj['是否重大危险源'] = res.data.isGreateDangerSource ? '是' : '否';
                detailObj['风险分析对象编码'] = res.data.v_RISK_OBJECT_CODE ? res.data.v_RISK_OBJECT_CODE : '-';
                
                setArr = [{
                    formTitle: '基础信息',
                    type: 'form',
                    info: detailObj,
                }];
                detailInfo.value = setArr;
                MdetailDialog.value = true;
            }
        }
        /*** 详情 */
        const detailHandle = (id: number) => {
            getDetailFun(id);
        }
        /*** 详情关闭事件 */
        const cancelDetailClick = () => {
            MdetailDialog.value = false;
        }
        /*** ================================= 详情类数据操作 =================================  */
        
        /*** ================================= 查询类数据操作 =================================  */
        let searchObj:any = reactive({});
        const basicsInfo: any = ref([]);
        const searInfo: any = ref();

        /*** 获取需要查询的数据 */
        const searchHandel = (val: any) => {
            searInfo.value = val;
        }

        /*** 查询按钮 */
        const searchClick = () => {
            let newObj = Object.keys(searInfo.value);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = searInfo.value[i];
                });
            }
        };

        /*** 重置按钮 */
        const resetClick = () => {
            searInfo.value = {};
            let newObj = Object.keys(searchObj);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
                });
            }
            initInfoFun();
        };

        let depArr: any = [];
        let locationArr: any = [];
        let typeArr: any = [];
        // 获取数据
        const getFun = async () => {
            // 所属区域
            let params: any = {};
            params.N_Id = 0;
            params.N_GroupId = 0;
            params.N_HeadId = 0;
            axios.get(equUrl,{ params: params }).then((res: any) => {
                console.log(res,'res12')
                if(res.success && res.data.length !== 0){
                    console.log(res.data,'res.data')
                    locationArr = res.data;
                }
            }).catch((error: any) => {
                console.error('请求错误', error)
            });
            
            let ras: any = await sysOrgTree({}); // 获取组织架构列表
            let rbs: any = await sysDictDataList({TypeCode: 'PartitionType'}); // 风险分区类型
            if(ras.success && ras.data.length !== 0) {
                depArr = ras.data;
            }
            if(rbs.success && rbs.data.length !== 0) {
                rbs.data.map((item: any) => {
                    item.label = item.value;
                    item.value = item.value;
                });
                typeArr = rbs.data;
            }
        }
        
        /*** 初始化数据 */
        const initInfoFun = () => {
            basicsInfo.value = [{
                    typeId: 'i_Name', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_Name', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '分区名称', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'burl', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'nameEvent', // 事件名称 --- 选填
                },{
                    typeId: 's_Area', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'n_AreaChartState', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '风险分区图绘制状态', // placeholder数据
                    defaultProp: [
                        {label: '未绘制', value: 0},
                        {label: '已绘制', value: 1},
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'areaChange', // 事件名称 --- 选填
                },{
                    typeId: 's_Dep', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'l_ResponsibleDepId', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '责任部门', // placeholder数据
                    defaultProp: depArr, // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                    propsVal: { checkStrictly: true , label: 'title', value: 'id', children: 'children' }, // 级联选择器 --- 选填
                },{
                    typeId: 'i_Man', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_ResponsibleMan', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '负责人', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'burl', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'manEvent', // 事件名称 --- 选填
                },{
                    typeId: 's_Location', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'l_SpatialLocationId', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '所属空间位置', // placeholder数据
                    defaultProp: locationArr, // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                    propsVal: { checkStrictly: true , label: 'v_FullName', value: 'n_Id', children: 'children' }, // 级联选择器 --- 选填
                },{
                    typeId: 's_Type', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_Type', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '风险分区类型', // placeholder数据
                    defaultProp: typeArr, // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'typeChange', // 事件名称 --- 选填
                },{
                    typeId: 's_Alarm', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'isAlarmIntrude', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '报警类型-闯入', // placeholder数据
                    defaultProp: [
                        {label: '是', value: true},
                        {label: '否', value: false}
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'alarmChange', // 事件名称 --- 选填
                },{
                    typeId: 's_Overman', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'isAlarmOverman', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '报警类型-超员', // placeholder数据
                    defaultProp: [
                        {label: '是', value: true},
                        {label: '否', value: false}
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'overmanChange', // 事件名称 --- 选填
                },{
                    typeId: 's_Posts', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'isAlarmSerialPosts', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '报警类型-串岗', // placeholder数据
                    defaultProp: [
                        {label: '是', value: true},
                        {label: '否', value: false}
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'postsChange', // 事件名称 --- 选填
                },{
                    typeId: 's_Still', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'isAlarmStill', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '报警类型-静止', // placeholder数据
                    defaultProp: [
                        {label: '是', value: true},
                        {label: '否', value: false}
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'stillChange', // 事件名称 --- 选填
                },{
                    typeId: 's_Level', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'n_RiskLevel', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '风险等级', // placeholder数据
                    defaultProp: [
                        {label: '低风险', value: 0},
                        {label: '一般风险', value: 1},
                        {label: '较大风险', value: 2},
                        {label: '重大风险', value: 3}
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'levelChange', // 事件名称 --- 选填
                },{
                    typeId: 's_Danger', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'n_DangerSourceLevel', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '危险源等级', // placeholder数据
                    defaultProp: [
                        {label: '一级', value: 1},
                        {label: '二级', value: 2},
                        {label: '三级', value: 3},
                        {label: '四级', value: 4},
                        {label: '非重大危险源', value: 9}
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'dangerChange', // 事件名称 --- 选填
                },{
                    typeId: 's_Greate', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'isGreateDangerSource', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '是否重大危险源', // placeholder数据
                    defaultProp: [
                        {label: '是', value: true},
                        {label: '否', value: false}
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: 'greateChange', // 事件名称 --- 选填
                }
            ]
        }
        
        onMounted(async () => {
            await getFun();
            // getPartitionListFun();
            initInfoFun(); 
        });
        /*** ================================= 查询类数据操作 =================================  */

        /*** ================================= 导出数据函数操作 ================================= */
        const excelRef: any = ref(null);
        const handleExport = () => {
            if(excelRef.value){
                if(excelRef.value.data.length !== 0){
                    let tableExcel: any = [];
                    let tableArr = excelRef.value.data;
                    tableArr.map((item: any) => {
                        let tableObj: any = {};
                        tableObj['名称'] = item.v_Name ? item.v_Name : '-';
                        tableObj['风险等级'] = item.v_RiskLevelName ? item.v_RiskLevelName : '-';
                        tableObj['危险源等级'] = item.v_DangerSourceLevelName ? item.v_DangerSourceLevelName : '-';
                        tableObj['是否重大危险源'] = item.isGreateDangerSource ? '是' : '否';
                        tableObj['风险分区类型'] = item.v_Type ? item.v_Type : '-';
                        tableObj['所属空间位置'] = item.v_SpatialLocationName ? item.v_SpatialLocationName : '-';
                        tableObj['风险分区图绘制状态'] = item.v_AreaChartStateName ? item.v_AreaChartStateName : '-';
                        tableObj['责任部门'] = item.v_ResponsibleDepName ? item.v_ResponsibleDepName : '-';
                        tableObj['责任人'] = item.v_ResponsibleMan ? item.v_ResponsibleMan : '-';
                        tableObj['报警类型-闯入'] = item.isAlarmIntrude ? '是' : '否';
                        tableObj['报警类型-超员'] = item.isAlarmOverman ? '是' : '否';
                        tableObj['报警类型-串岗'] = item.isAlarmSerialPosts ? '是' : '否';
                        tableObj['报警类型-静止'] = item.isAlarmStill ? '是' : '否';
                        tableExcel.push(tableObj);
                    });
                    exportToExcel(tableExcel,'风险分区.xlsx');
                }else{
                    ElMessage({
                        type: 'error',
                        message: '暂无数据导出',
                    })
                }
            }
        }
        /*** ================================= 导出数据函数操作 ================================= */
        

        return {
            ...getTableData(SMSDCRiskPartitionPage,{},searchObj),
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            nodeClick,
            repairInfo,
            deleteHandle,
            documentClick,
            isFunDialog,
            cancelFunClick,
            controlFunClick,
            repairFunInfo,
            viewClick,
            listData,
            filterSearch,
            Search: Search,
            handleInputChange,
            drawVisible,
            cancelDrawClick,
            controlDrawClick,
            drawHandle,
            drawInfo,
            depObj,
            userObj,
            coordinatesArr,
            handleSelectionChange,
            batchHandle,

            // 导出Excel
            excelRef,
            handleExport,
            
            // 详情
            MdetailDialog,
            detailHandle,
            detailInfo,
            cancelDetailClick,

            // 查询事件
            basicsInfo,
            searchHandel,
            searchClick,
            resetClick,
        }
    },
} )
</script>
<style lang="scss"> @import '../style/public.scss'; </style>
<style scoped lang="scss">
    ul {
        list-style: none;
        li {
            cursor: pointer;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            text-align: center;
            padding: 10px 0;
        }
    }
    #RiskZoning {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        .upload-demo{
            margin-left: 12px;
            margin-top: 2px;
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
.clear-bg{
    background-color: transparent !important;
}
</style>